<template>
  <view class="fifter">
    <view class="tab">
     <view
	   v-if="is_mch!=1"
        class="item"
        v-for="item of tabList"
        :class="[getClass(item.id)]"
        :key="item.id"
        @click="changTab(item)"
      >
        <view class="bg"><text></text></view>
        <view class="name">{{ item.name }}</view>
      </view>
    </view>

    <view class="modelBox">
      <view class="form">
        <view class="formLine"></view>
        <view class="dateTitle">日期范围</view>
        <view class="dateTage">
          <view
            class="item"
            v-for="item of dateTagList"
            :key="item.id"
            :class="[getDateClass(item.id)]"
            @click="handle('checked', item)"
          >
            {{ item.name }}
          </view>
        </view>

        <view class="dateCalendar">
          <view class="item">
            <picker
              class="picker"
              @change="(e) => handle('change', e, 'start_date')"
              mode="date"
              :value="date_range.start_date"
            >
              {{ date_range.start_date || $t("newAdmin.filter.startTime") }}
            </picker>

            <i class="iconfont icon-calculator"></i>
          </view>
          <view class="line"></view>
          <view class="item">
            <picker
              class="picker"
              @change="(e) => handle('change', e, 'end_date')"
              mode="date"
              :start="startTime"
              :end="endTime"
              :value="date_range.end_date"
              :disabled="!date_range.start_date"
            >
              {{ date_range.end_date || $t("newAdmin.filter.endTime") }}
            </picker>

            <i class="iconfont icon-calculator"></i>
          </view>
        </view>
      </view>

      <slot></slot>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    index: {
      type: String,
      default: "",
    },

    tabList: {
      type: Array,
      default() {
        return [];
      },
    },
	is_mch: {
	  type: String,
	  default:0
	},
  },

  computed: {
    getClass() {
      return (id) => {
        return id === this.index ? `on item${id}` : `item${id}`;
      };
    },

    getDateClass() {
      return (id) => {
        return id === this.active ? "on" : "";
      };
    },
  },

  watch: {
    date_range: {
      handler({ end_date, start_date }) {
        if (end_date && start_date && this.active === undefined) {
          this.Emit.$emit("handleTime", {
            end_date,
            start_date,
          });
        }
      },
      deep: true,
    },

    active: {
      handler(e) {
        if (e === undefined) return;

        let end_date = this.$utils.turnDate(new Date().getTime(), "yyyy-mm-dd"),
          start_date;
        if (e === 0) {
          start_date = new Date().getTime() - 1000 * 60 * 60 * 24 * 7;
        } else {
          start_date = new Date().getTime() - 1000 * 60 * 60 * 24 * 30;
        }

        start_date = this.$utils.turnDate(start_date, "yyyy-mm-dd");

        this.$nextTick(() => {
          this.Emit.$emit("handleTime", {
            end_date,
            start_date,
          });
        });
      },
      immediate: true,
    },
  },

  data() {
    return {
      startTime: "",
      endTime: "",
      active: 0,

      date_range: {
        start_date: "",
        end_date: "",
      },

      dateTagList: [
        { name: "近7天", id: 0 },
        { name: "近30天", id: 1 },
      ],
    };
  },

  methods: {
    changTab(item) {
      if (this.index === item.id) {
        return;
      }

      this.$emit("changeIndex", item.id);
    },

    handle(type, item, el) {
      let { date_range } = this;
      switch (type) {
        case "checked":
          if (item.id === this.active) return;
          this.active = item.id;
          this.date_range = {
            start_date: "",
            end_date: "",
          };
          break;

        case "change":
          if (this.active !== undefined) {
            this.active = undefined;
          }

          // 获取30天日期
          if (el === "start_date") {
            this.getDate(item.detail.value);
          }

          if (el === "start_date" && date_range.end_date) {
            date_range.end_date = "";
          }

          this.$set(date_range, el, item.detail.value);
          break;
      }
    },

    getDate(dateStr) {
      let _date = new Date(dateStr).getTime(),
        _date1 = _date + 1000 * 60 * 60 * 24 * 30,
        _date2 = _date - 1000 * 60 * 60 * 24 * 30;

      this.endTime = this.$utils.turnDate(_date1, "yyyy-mm-dd");
      this.startTime = this.$utils.turnDate(_date2, "yyyy-mm-dd");
    },
  },
};
</script>

<style lang="less" scoped>
.fifter {
  background: #fff;
  border-radius: 16rpx;
}

.tab {
  position: relative;
  display: flex;
  margin-top: 34rpx;
  border-radius: 16rpx 16rpx 0px 0px;
  background: #f2f2f2;

  .item {
    position: relative;
    width: 50%;
    height: 80rpx;
    line-height: 80rpx;
    color: #8c8c8c;
    font-size: 26rpx;
    text-align: center;

    &.on {
      color: #262626;

      .bg {
        opacity: 1;
      }
    }
  }

  .item0 {
    .bg text {
      left: 100%;
      border-bottom: 90rpx solid #fff;
      border-right: 20rpx solid transparent;
    }
  }

  .item1 {
    .bg text {
      right: 100%;
      border-bottom: 90rpx solid #fff;
      border-left: 20rpx solid transparent;
    }
  }

  .name {
    position: relative;
    z-index: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .bg {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 90rpx;
    background: #fff;
    border-radius: 16rpx 16rpx 0 0;
    opacity: 0;
    -webkit-transition: 0.3s all;
    transition: 0.3s all;

    text {
      position: absolute;
      bottom: 0;
    }
  }
}

.form {
  position: relative;
  padding: 28rpx 0;
}

.formLine {
  position: absolute;
  left: -10rpx;
  right: -10rpx;
  bottom: 0;
  height: 1px;
  background: #f1f1f1;
}

.dateTage {
  display: flex;
  flex-wrap: wrap;
  padding: 28rpx 0 22rpx;

  .item {
    margin-right: 10px;
    padding: 8rpx 22rpx;
    background: #f6f6f6;
    border-radius: 32px;

    &.on {
      background: #ffe8e1;
      color: #ff714a;
    }
  }
}

.modelBox {
  padding: 0 24rpx 76rpx;
}

.dateCalendar {
  display: flex;
  align-items: center;

  .item {
    display: flex;
    justify-content: space-between;
    padding: 0 18rpx;
    width: 284rpx;
    line-height: 70rpx;
    height: 74rpx;
    background: #f6f6f6;
    border-radius: 12rpx;
    color: #8c8c8c;

    .icon-calculator {
      font-size: 40rpx;
    }
  }

  .line {
    margin: 0 6rpx;
    width: 12rpx;
    height: 2rpx;
    background: #8c8c8c;
  }
}

.picker {
  width: 100%;
  height: 100%;
  text-align: left;
}
</style>
